export class MoveObject {
  state={
    x:0,
    y:0,
    width:0,
    height:0,
    start:false,
    cmd:"h"
  }

  moveResult=(result)=>{
    //console.log(this.changeTarget)
     if(this.changeTarget){
       if(this.state.cmd==="h"){
          this.changeTarget.style.width=(this.state.width+result)+"px";
       }
       if(this.state.cmd==="v"){
          this.changeTarget.style.height=(this.state.height+result)+"px";
       }

     }
  }

  stopResult=(result)=>{

  }

  setChangeTarget=(target)=>{
    //delete this.changeTarget;
    if(!this.state.start){
        this.changeTarget=target;
    }

    //this.state.width=target.offsetWidth;
  }
  onMouseDown=(e)=>{
     e = e||window.event;
     e.stopPropagation();
     e.preventDefault();
     this.state.x=e.clientX;
     this.state.y=e.clientY;
     this.state.start=true;
     if(e.target.getAttribute("move")==="h"){
        this.state.cmd="h";
        e.target.style.background="#0a8fff07";
        this.target=e.target;
        if(this.changeTarget){
          this.state.width=this.changeTarget.clientWidth;
        }
     }
     if(e.target.getAttribute("move")==="v"){
        this.state.cmd="v";
        e.target.style.background="#0a8fff07";
        this.target=e.target;
        if(this.changeTarget){
          this.state.height=this.changeTarget.clientHeight;
        }

     }
     document.addEventListener("mousemove",this.onMouseMove,false);
     document.addEventListener("mouseup",this.onMouseUp,false);
  }

  onMouseMove=(e)=>{
    e = e||window.event;
    e.stopPropagation();
    e.preventDefault();

    if(this.state.start){
        if(this.target){
          if(this.state.cmd==="h"){
             //this.target.style.left=(this.state.x+(e.clientX-this.state.x))+"px";
             this.moveResult(e.clientX-this.state.x);
          }
          if(this.state.cmd==="v"){
             //this.target.style.left=(this.state.x+(e.clientX-this.state.x))+"px";
             this.moveResult(e.clientY-this.state.y);
          }
        }

      }


  }

  onMouseUp=(e)=>{
    e = e||window.event;
    //e.stopPropagation();
    //e.preventDefault();
    if(this.target){
      if(this.state.cmd==="h"){
         //this.target.style.left=(this.state.x+(e.clientX-this.state.x))+"px";
          this.stopResult(e.clientX-this.state.x);
      }
      if(this.state.cmd==="v"){
         //this.target.style.left=(this.state.x+(e.clientX-this.state.x))+"px";
          this.stopResult(e.clientX-this.state.x);
      }

      this.target.removeAttribute('style');
    }

      this.target=null;
      this.state.start=false;
      this.state.cmd="";
      this.changeTarget=false;
      console.log("松开",e.clientX-this.state.x)
      document.removeEventListener("mousemove",this.onMouseMove,false);
      document.removeEventListener("mouseup",this.onMouseUp,false);
  }

  init=()=>{
     console.log("初始化拖动");
     document.addEventListener("mousedown",this.onMouseDown,false);


  }
  unInit=()=>{
    console.log("卸载事件");
    document.removeEventListener("mousedown",this.onMouseDown,false);

  }
}
